<script setup lang="tsx">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { useRouter, useRoute } from 'vue-router'
import { pageRelationMerchantApi } from '@/api/BusinessManagement'
import { ElButton, ElTag } from 'element-plus'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useI18n } from '@/hooks/web/useI18n'
import { useTable } from '@/hooks/web/useTable'
import Detail from '../../BusinessManagement/components/Detail.vue'

const { t } = useI18n()
const { go } = useRouter()
const { query } = useRoute()

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    const res = await pageRelationMerchantApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      id: unref(query.id as any),
      ...unref(searchParams)
    })
    return {
      list: res.data.list || [],
      total: res.data.total || 0
    }
  }
})
const { total, loading, dataList, pageSize, currentPage } = tableState
const { getList } = tableMethods
const showDrawer = ref(false)
const detailId = ref(0)
const details = async (row: any) => {
  detailId.value = row.id
  showDrawer.value = true
}

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'id',
    label: '商户ID',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    table: {
      width: 220,
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <div class={'text-center'}>
                <div>{row.id}</div>
                {row.ownState == '2' ? <ElTag>商家商户</ElTag> : ''}
              </div>
            </>
          )
        }
      }
    }
  },
  {
    field: 'merchantName',
    label: '商户名称',
    search: {
      componentProps: {
        placeholder: '请输入商户名称'
      }
    },
    form: {
      hidden: true
    },
    table: {
      width: 220,
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <div class={'flex items-center'}>
                <img class={'w-10'} src={row.avatar} />
                <span>{row.merchantName}</span>
              </div>
            </>
          )
        }
      }
    }
  },
  {
    field: 'contactKeyword',
    label: '联系人',
    search: {
      componentProps: {
        placeholder: '请输入联系人姓名/手机号'
      }
    },
    form: {
      hidden: true
    },
    table: {
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <div>{row.contactMobileNo}</div>
              <div>{row.contactName}</div>
            </>
          )
        }
      }
    }
  },
  {
    field: 'merchantName',
    label: '企业名称',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'provinceName',
    label: '所属省市',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    table: {
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <span>
                {row.provinceName}
                {row.cityName}
              </span>
            </>
          )
        }
      }
    }
  },
  {
    field: 'position',
    label: '详细地址',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'mccName',
    label: '所属行业',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'createTime',
    label: '关联时间',
    search: {
      component: 'DatePicker',
      componentProps: {
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss'
      }
    },
    form: {
      hidden: true
    },
    table: {
      width: 220
    }
  },
  {
    field: 'action',
    label: t('userDemo.action'),
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    search: {
      hidden: true
    },
    table: {
      width: 100,
      slots: {
        default: (data: any) => {
          const row = data.row
          return (
            <>
              <ElButton
                v-hasPermi="GET /merchant/details"
                type="primary"
                link
                onClick={() => details(row)}
              >
                查看详情
              </ElButton>
            </>
          )
        }
      }
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)

const searchParams = ref({})
const setSearchParams = (params: any) => {
  const { createTime, ...rest } = params
  let startTime, endTime
  if (createTime && createTime.length > 0) {
    startTime = createTime[0]
    endTime = createTime[1]
  }
  currentPage.value = 1
  searchParams.value = {
    startTime,
    endTime,
    ...rest
  }
  getList()
}
</script>

<template>
  <div class="flex w-100% h-100%">
    <ContentDetailWrap class="flex-[3] ml-20px" title="关联商户列表">
      <template #header>
        <ElButton @click="go(-1)">
          {{ t('common.back') }}
        </ElButton>
      </template>
      <Search
        :schema="allSchemas.searchSchema"
        @reset="setSearchParams"
        @search="setSearchParams"
      />
      <Table
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :columns="allSchemas.tableColumns"
        :data="dataList"
        :loading="loading"
        @register="tableRegister"
        :pagination="{
          total
        }"
      />
    </ContentDetailWrap>
    <ElDrawer
      title="商户详情"
      v-model="showDrawer"
      direction="rtl"
      size="650px"
      @close="showDrawer = false"
    >
      <Detail v-if="showDrawer" :id="detailId" />
    </ElDrawer>
  </div>
</template>
